











<template>

  <div>

    <el-row :gutter="20">

      <el-col :span="20">

        <el-form :inline="true" class="demo-form-inline">

          <el-form-item label="岗位名称:">

            <el-input v-model="name" placeholder="岗位名称"></el-input>

          </el-form-item>



          <el-form-item label="组织:" prop="areaName">

            <el-select

              ref="selectRef"

              v-model="region"

              clearable

              @clear="dd"

              placeholder="组织"

            >

              <el-option

                label="请选择"

                value=""

                style="display: none"

              ></el-option>



              <el-tree

                :data="data"

                :props="defaultProps"

                @node-click="handleNodeClick"

              ></el-tree>

            </el-select>

          </el-form-item>



          <el-date-picker

            v-model="sj1"

            type="datetime"

            placeholder="选择开始日期时间"

          >

          </el-date-picker>



          <el-date-picker

            v-model="sj2"

            type="datetime"

            placeholder="选择结束日期时间"

          >

          </el-date-picker>



          <el-form-item>

            <el-button type="primary" @click="onSubmit">查询</el-button>

          </el-form-item>

        </el-form>

      </el-col>

    </el-row>



    <el-container>

      <el-button

        class="el-icon-circle-plus"

        size="mini"

        type="primary"

        @click="addEmp()"

        >添加</el-button

      >

    </el-container>



    <el-table :data="tableData" stripe style="width: 100%">

      <el-table-column prop="usersPhotoPath" label="照片" width="180">

        <template slot-scope="scope">

          <div>

            <el-avatar

              :src="

                'http://rgpi98ksk.hn-bkt.clouddn.com/' +

                scope.row.usersPhotoPath

              "

            ></el-avatar>

          </div>

        </template>

      </el-table-column>



      <el-table-column prop="usersAccountNumber" label="账号" width="180">

      </el-table-column>



      <el-table-column prop="usersUsername" label="姓名" width="180">

      </el-table-column>



      <el-table-column prop="usersSex" label="性别" width="180">

        <template slot-scope="scope">

          <el-tag disable-transitions>

            <span v-if="scope.row.usersSex == 1">男</span

            ><span v-if="scope.row.usersSex == 0">女</span>

          </el-tag>

        </template>

      </el-table-column>



      <el-table-column prop="usersMailbox" label="邮箱" width="180">

      </el-table-column>



      <el-table-column prop="usersPhone" label="电话" width="180">

      </el-table-column>



      <el-table-column

        prop="xsgInstitutionsTmsOrganizationManagement.cliqueName"

        label="组织"

        width="180"

      >

      </el-table-column>



      <!-- <el-table-column



      prop="systemTmsRoles.rolesName"



      label="角色"



      width="180">



    </el-table-column> -->



      <el-table-column

        prop="systemTmsPost.systemPostName"

        label="岗位"

        width="180"

      >

      </el-table-column>



      <el-table-column

        prop="usersCreateTime"

        label="创建时间"

        sortable

        width="180"

      >

      </el-table-column>



      <el-table-column

        prop="usersdescribe"

        label="个人描述"

        sortable

        width="180"

      >

      </el-table-column>



      <el-table-column

        prop="usersStatus"

        label="状态"

        width="100"

        :filters="[

          { text: '启用', value: '0' },



          { text: '禁用', value: '1' },

        ]"

        :filter-method="filterTag"

        filter-placement="bottom-end"

      >

        <template slot-scope="scope">

          <el-tag disable-transitions>

            <span v-if="scope.row.usersStatus == 1">禁用</span

            ><span v-if="scope.row.usersStatus == 0">启用</span>

          </el-tag>

        </template>

      </el-table-column>



      <el-table-column label="操作">

        <template slot-scope="scope">

          <el-button size="mini" @click="handleEdit(scope.$index, scope.row)"

            >编辑</el-button

          >



          <el-button size="mini" @click="handleDelete(scope.row)"

            >删除</el-button

          >

        </template>

      </el-table-column>

    </el-table>



    <el-pagination

      @size-change="handleSizeChange"

      @current-change="handleCurrentChange"

      :current-page="currentPage4"

      :page-sizes="[2, 4, 6]"

      :page-size="4"

      layout="total, sizes, prev, pager, next, jumper"

      :total="total"

    >

    </el-pagination>



    <el-dialog

      title="提示"

      :visible.sync="dialogFormVisible"

      @close="closeDialog"

    >

      <el-form

        :model="form"

        :rules="rules"

        ref="form1"

        label-width="100px"

        class="demo-ruleForm"

      >

        <el-form-item

          label="账号:"

          prop="usersAccountNumber"

          style="margin-left: 100px"

        >

          <el-input

            v-model="form.usersAccountNumber"

            @blur="cxname()"

          ></el-input>

        </el-form-item>



        <br />



        <br />



        <el-form-item label="用户编号:" style="margin-left: 100px">

          <el-select v-model="form.usersCustomerId" placeholder="请选择">

            <!-- <el-option



              v-for="item in this.tableData"



              :key="item.systemUserId"



              :label="item.usersCustomerId"



              :value="item.usersCustomerId"



            >



            </el-option> -->



            <el-option value="admin"> admin</el-option>



            <el-option value="U"> U</el-option>



            <el-option value="K"> K</el-option>



            <el-option value="S"> S</el-option>

          </el-select>

        </el-form-item>



        <br />



        <br />



        <el-form-item label="姓名:" style="margin-left: 100px">

          <el-input v-model="form.usersUsername"></el-input>

        </el-form-item>



        <br />



        <br />



        <el-form-item label="密码:" style="margin-left: 100px">

          <el-input type="password" v-model="form.usersPassword"></el-input>

        </el-form-item>



        <br />



        <br />



        <el-form-item label="照片:" style="margin-left: 100px">

          <el-form-item style="margin-left: -400px">

            <el-upload

              class="upload-demo"

              ref="upload"

              action=""

              :http-request="upload"

              multiple=""

              :auto-upload="false"

              list-type="picture-card"

              :file-list="fileList"

              :limit="1"

              :on-exceed="handleExceed"

            >

              <i slot="default" class="el-icon-plus"></i>



              <div slot="file" slot-scope="{ file }">

                <img

                  class="el-upload-list__item-thumbnail"

                  :src="file.url"

                  alt=""

                />



                <span class="el-upload-list__item-actions">

                  <span

                    class="el-upload-list__item-preview"

                    @click="handlePictureCardPreview(file)"

                  >

                    <i class="el-icon-zoom-in"></i>

                  </span>



                  <span

                    v-if="!disabled"

                    class="el-upload-list__item-delete"

                    @click="handleRemove(file)"

                  >

                    <i class="el-icon-delete"></i>

                  </span>

                </span>

              </div>

            </el-upload>



            <el-dialog :visible.sync="dialogVisible">

              <img width="100%" :src="dialogImageUrl" alt="" />

            </el-dialog>

          </el-form-item>

        </el-form-item>



        <el-form-item label="组织:" style="margin-left: 100px">

          <el-select

            ref="selectRef"

            v-model="region1"

            clearable

            @clear="dd1"

            placeholder="组织"

          >

            <el-option

              label="请选择"

              value=""

              style="display: none"

            ></el-option>



            <el-tree

              :data="data"

              :props="defaultProps"

              @node-click="handleNodeClick1"

            ></el-tree>

          </el-select>

        </el-form-item>



        <br />



        <br />



        <el-form-item label="岗位:" style="margin-left: 100px">

          <el-select v-model="form.usersPostId" placeholder="请选择">

            <el-option

              v-for="item in this.zuzhi"

              :key="item.systemPostId"

              :label="item.systemPostName"

              :value="item.systemPostId"

            >

            </el-option>

          </el-select>

        </el-form-item>



        <br />



        <br />



        <el-form-item label="角色:" style="margin-left: 100px">

          <el-select v-model="roleId" placeholder="请选择">

            <el-option

              v-for="item in this.rose"

              :key="item.systemRolesId"

              :label="item.rolesName"

              :value="item.systemRolesId"

            >

            </el-option>

          </el-select>

        </el-form-item>



        <br />



        <br />



        <el-form-item label="邮箱:" style="margin-left: 100px">

          <el-input v-model="form.usersMailbox"></el-input>



          <br />



          <br />

        </el-form-item>



        <el-form-item label="电话:" style="margin-left: 100px">

          <el-input v-model="form.usersPhone"></el-input>



          <br />



          <br />

        </el-form-item>



        <el-form-item label="性别:" style="margin-left: 100px">

          <el-select v-model="form.usersSex" placeholder="请选择状态">

            <el-option label="女" value="0"></el-option>



            <el-option label="男" value="1"></el-option>

          </el-select>

        </el-form-item>



        <br />



        <br />



        <el-form-item label="状态:" style="margin-left: 100px">

          <el-select v-model="form.usersStatus" placeholder="请选择状态">

            <el-option label="启用" value="0">启用</el-option>



            <el-option label="禁用" value="1">禁用</el-option>

          </el-select>

        </el-form-item>



        <br />



        <br />



        <el-form-item label="个人描述:" style="margin-left: 100px">

          <el-input v-model="form.userdescribe"></el-input>



          <br />



          <br />

        </el-form-item>

      </el-form>



      <div slot="footer" class="dialog-footer">

        <!-- <el-button @click="dialogFormVisible = false">取 消</el-button>



        <el-button type="primary" @click="updateAndAdd()">确 定</el-button> -->



        <el-button

          style="margin-left: 10px"

          size="small"

          type="success"

          @click="submitUpload"

          >上传到服务器</el-button

        >

      </div>

    </el-dialog>

  </div>

</template>







 















  







<script>

import axios from "axios";



export default {

  data() {

    return {

      loading: true,



      dialogFormVisible1: false,



      src: [],



      fileList: [],



      dialogImageUrl: "",



      dialogVisible: false,



      disabled: false,



      //



      region1: "",



      data: [],



      defaultProps: {

        children: "childrenxsgInstitutionsTmsOrganizationManagement",



        label: "cliqueName",

      },



      dialogTableVisible: false,



      dialogFormVisible: false,



      form: {

        cliqueId: this.cliqueId,

      },



      formLabelWidth: "120px",



      tableData: [],



      currentPage4: 1, //当前页



      num: 4, //每页条数



      total: 0,



      numshu: 1,



      bj: "",



      id: "",



      did: "",



      name: "",



      sj1: "",



      sj2: "",



      region: "",



      cliqueId: "",



      rose: "",



      urlImg: "",



      dialogFormVisible: false,



      formLabelWidth: "120px",



      PostId: "",



      roleId: "",



      zuzhi: "",



      systemPostName: "",



      rules: {

        usersAccountNumber: [

          { required: true, message: "请输入活动名称", trigger: "blur" },



          {

            pattern: /^[^\u4e00-\u9fa5]+$/,



            message: "不允许输入中文",



            trigger: "blur",

          },



          {

            pattern: /^[A-Za-z0-9\u4e00-\u9fa5]+$/,



            message: "不允许输入空格等特殊符号",



            trigger: "blur",

          },



          {

            pattern: /[0-9a-zA-Z]{1,6}/,



            message: "只可以输入数字和字母",



            trigger: "blur",

          },



          { min: 1, max: 6, message: "长度在 1 到 6个字符", trigger: "blur" },

        ],

      },

    };

  },



  methods: {

    closeDialog() {

      this.$refs.upload.clearFiles();



      this.fileList = [];

    },



    cxname() {

      // axios



      //   .get("/api/UserAListName", {

      //     params: { name: this.form.usersAccountNumber },

      //   })



      //   .then((data) => {

      //     if (this.form.usersAccountNumber == data.data.usersAccountNumber) {

      //       alert("用户已存在");

      //     }

      //   });

    },



    dd1() {

      axios



        .get("/api/SystemtmsPostAllList", { params: { q: "" } })



        .then((data) => {

          this.zuzhi = data.data;

        });

    },



    handleExceed(files, fileList) {

      this.$message.warning(

        `当前限制选择 1 个文件，本次选择了 ${files.length} 个文件，共选择了 ${

          files.length + fileList.length

        } 个文件`

      );

    },



    handlePictureCardPreview(file) {

      this.dialogImageUrl = file.url;



      this.dialogVisible = true;

    },



    submitUpload() {

      this.$refs.upload.submit();

    },



    //通过onchanne触发方法获得文件列表



    handleChange(file, fileList) {

      this.fileList = fileList;



      console.log(fileList);

    },



    handlePreview(file) {

      console.log(file);

    },



    upload(file) {

      this.$refs.form1.validate((valid) => {

        if (valid) {

          if (this.bj == "true") {





             axios



              .get("/api/UserAListName", {

                params: { name: this.form.usersAccountNumber},

              })



              .then((data) => {

                console.log(data)

             if(this.form.usersAccountNumber == data.data.usersAccountNumber && this.form.systemUserId!=data.data.systemUserId){

                        alert("用户已经存在")

              }else{

                  

                       let fd = new FormData();



            console.log(file.file);



            fd.append("file", file.file);



            axios.post("/api/qn/upImgs", fd).then((res) => {

              console.log(res.data.code);



              if (res.data.code == 200) {

                axios



                  .post(

                    "/api/SystemTmsUsersupdateByPrimaryKeySelective1",



                    {

                      systemTmsUsers: this.form,



                      hh: this.roleId,



                      jj: this.cliqueId,

                    }

                  )



                  .then((data) => {

                    this.$notify({

                      title: "成功",



                      message: "修改成功",



                      type: "success",

                    });



                    this.getEmpList();



                    this.$refs.upload.clearFiles();

                  });



                this.dialogFormVisible = false;

              }

                 

              });

              }

             

              

            });

          } else {

            axios



              .get("/api/UserAListName", {

                params: { name: this.form.usersAccountNumber },

              })



              .then((data) => {

                if (

                this.form.usersAccountNumber  == data.data.usersAccountNumber

                ) {

                  alert("用户已存在");

                } else {

                  let fd = new FormData();



                  console.log(file.file);



                  fd.append("file", file.file);



                  axios.post("/api/qn/upImgs", fd).then((res) => {

                    console.log(res.data.code);



                    if (res.data.code == 200) {

                      axios



                        .get("/api/SystemTmsUsersinsertSelective", {

                          params: {

                            record: JSON.stringify(this.form),



                            cliqueId: this.cliqueId,



                            roleID: this.roleId,

                          },

                        })



                        .then((data) => {

                          this.$notify({

                            title: "成功",



                            message: "添加成功",



                            type: "success",

                          });



                          this.getEmpList();



                          this.$refs.upload.clearFiles();

                        });



                      this.dialogFormVisible = false;

                    }

                  });

                }

              });

          }

        } else {

          console.log("error submit!!");



          return false;

        }

      });

    },



    handleRemove(file) {

      this.$refs.upload.handleRemove(file);

    },



    currStationChange(val) {

      console.log("currStationChange", val);



      if (val) {

        this.queryUnit(val);

      } else {

        // 所属厂站没有值，清空操作单元的值



        this.formData.unitId = null;



        // 所属厂站没有值，清空操作单元下拉框选项



        this.unitTree = [];

      }

    },



    dd() {

      this.id = "";

    },



    handleNodeClick1(data) {

      this.cliqueId = data.cliqueId;



      this.region1 = data.cliqueName;



      console.log(this.cliqueId);



      axios



        .get("/api/SystemtmsPostAllList", { params: { q: this.cliqueId } })



        .then((data) => {

          this.zuzhi = data.data;

        });

    },



    handleNodeClick(data) {

      this.id = data.cliqueId;



      this.region = data.cliqueName;

    },



    handleDelete(row) {

      //建议使用静态删除 data.splice(index,1)



      console.log(row);



      this.$confirm("确定删除此员工吗?", {

        confirmButtonText: "确定",



        cancelButtonText: "取消",



        type: "warning",

      })



        .then(() => {

          axios



            .get("/api/deleteByPrimaryKey", {

              params: { systemUserId: row.systemUserId },

            })



            .then((data) => {

              alert("删除成功");



              this.getEmpList();

            });

        })



        .catch(() => {

          this.$message({

            type: "info",



            message: "已取消删除",

          });

        });

    },



    filterTag(value, row) {

      console.log(row.xsgInstitutionsTmsOrganizationManagement.cliqueStatus);



      return (

        row.xsgInstitutionsTmsOrganizationManagement.cliqueStatus === value

      );

    },



    filterHandler(value, row, column) {

      const property = column["property"];



      return row[property] === value;



      dleEditandleEdit;

    },



    addEmp() {

      this.region1 = "";



      this.dialogFormVisible = true;



      this.form = {};



      this.bj = "false";



      console.log(this.fileList.length);



      // this.$refs.upload.clearFiles();



      this.fileList=[]

    },



    handleEdit(index, row) {

      this.roleId = row.systemTmsRoles.rolesName;



      this.region1 = row.xsgInstitutionsTmsOrganizationManagement.cliqueName;



      this.fileList.push({

        url: "http://rgpi98ksk.hn-bkt.clouddn.com/" + row.usersPhotoPath,

      });



      this.PostId = row.systemPostId;



      this.form = row;



      this.bj = "true";



      this.dialogFormVisible = true;

    },



    onSubmit() {

      this.getEmpList();

    },



    getEmpList() {

      axios



        .get("/api/SystemTmsUsersAllList", {

          params: {

            page: this.currentPage4,



            num: this.num,



            name: this.name,



            region: this.id,



            datetimes: this.sj1,



            datetimes1: this.sj2,

          },

        })



        .then((data) => {

          console.log(data.data);



          this.tableData = data.data.rows; //获取分页数据



          this.total = data.data.total; //获取总记录数

        });

    },



    getist() {

      axios.get("/api/XsgSystemRolesAllList").then((data) => {

        this.rose = data.data;

      });

    },



    handleSizeChange(val) {

      console.log("数据" + val);



      this.num = val;



      this.getEmpList();

    },



    handleCurrentChange(val) {

      console.log("当前页" + val);



      this.currentPage4 = val;



      this.getEmpList();

    },



    getCaidan() {

      axios.get("/api/jigocaidanAllList").then((data) => {

        this.data = data.data;

      });

    },

  },



  created() {

    this.getEmpList();



    this.getCaidan();



    this.getist();

  },

};

</script>

